<template>
    <div class="eat">
        <!-- 地图 -->
        <div class="map">
            <baidu-map class="map" id="mapID" center="广州市从化区" :zoom="zoom" :scroll-wheel-zoom="true" @click="getPoint">
                <!--地图类型，两种：一种是路线一种是绿的那种-->
                <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT">
                </bm-map-type>
                <!--地图搜索功能，绑定上面的input，-->
                <!--zoom是搜索结果的视图比例，个人觉得12.8很舒服显示-->
                <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" zoom="12.8"
                    style="display: none"></bm-local-search>
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <!--信息窗口，show属性是控制显示隐藏，infoWindowClose和infoWindowOpen是控制信息窗口关闭隐藏的方法-->
                <bm-marker :position="postionMap">
                    <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen"
                        style="font-size: 14px">
                        <p>站点：{{ add.siteName }}</p >
                        <p>站点地址：{{ add.site }}</p >
                    </bm-info-window>
                </bm-marker>
            </baidu-map>
        </div>
        <!-- 门店 -->
        <div class="shop">
            <!-- 搜索框 -->
            <div class="search">
                <!-- <div class="iconfont icon-sousuo icon"></div> -->
                <van-icon name="search" class="icon" />
                <input type="text" v-model="keyword" @keyup.enter="Enter" />
            </div>
            <!-- 选择门店 -->
            <div class="chooseShop">
                <div @click="clicktab(index)" v-for="(item, index) in tabData" :class="[activeIndex == index ? 'active' : '']" class="nearbyshop">{{ item.title }}</div>
                <van-icon name="flag-o" class="iconflag" />
            </div>
            <!-- 展示门店 -->
            <div class="showShop" v-show = "tab===0">
                <div class="shop-item" v-for="item in FilterShopData"  @click="EnterProduct">
                    
                    <div class="item-left">
                        <div class="shopname">{{item.ShopName}}</div>
                        <div v-if = "item.operationStatus==1" class="shopstatus">营业中</div>
                        <div v-else = "item.operationStatus==0" class="shopstatus">暂停线上接单</div>
                        <div class="shoptime">营业时间:{{item.openTime}} </div>
                        <div class="shopaddress">{{item.ShopAddress}}</div>
                    </div>
                    <div class="item-rig">
                        <div class="line">
                            <div class="go">去下单</div>
                            <div class="dist">距离<span>{{item.distance}}</span></div>
                            <div class="icons">
                                <van-icon id="iconone" name="map-marked" />
                                <van-icon id="icontwo" name="phone" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="often" v-show = "tab===1">
                <div class="shop-item"  @click="EnterProduct">
                    <div class="item-left">
                        <div class="shopname">蜜雪冰城旗杆店</div>
                        <div class="shopstatus">营业中</div>
                        <div class="shoptime">营业时间:10:00-22:30 </div>
                        <div class="shopaddress">从化区旗杆镇府前路11-1号</div>
                    </div>
                    <div class="item-rig">
                        <div class="line">
                            <div class="go">去下单</div>
                            <div class="dist">距离<span>1km</span></div>
                            <div class="icons">
                                <van-icon id="iconone" name="map-marked" />
                                <van-icon id="icontwo" name="phone" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {getShopData} from '../api/Shop.js'
export default {
    name: "Eat",
    components:{
        getShopData
    },
    data() {
        return {
            // tab切换下标
            activeIndex: 0,
            // 内容切换下标
            tab: 0,
            show:false,
            shopdata:[],

            tabData: [
                {
                    title: "附近门店",
                },
                {
                    title: "常去门店",
                },
            ],
            isLogin:'',
            // 地图
            jgNameDialog: false,
            show: false,
            postionMap: {  //地图坐标
                lng: 120.211486,
                lat: 30.256576
            },
            location: '',
            keyword: '',  //搜索框关键词
            zoom: 12.8,   //放大比例
            address: '',   //位置详细信息
            add: {
                siteName: '',
                site: '',
                jd: '',
                wd: '',
                desce: '',
                type: '',
                jgName: '',
                jgNum: '',
            },
            organizationData: [],
            jgName: '',
            jgNum: '',
        };
    },
    created(){
        // 获取登录状态
        this.isLogin = localStorage.getItem("isLogin")
        console.log(this.isLogin);
        getShopData().then((data) => {
            this.shopdata = data.Shop;
            console.log(this.shopdata);
        });
    },  

    computed:{
        // 搜索店铺
        "FilterShopData"(){
            // 如果关键字为空,返回所有的店铺
            if(this.keyword==""){
                return this.shopdata
            }else{
                // 当店铺数据里有包含keyword文字,就保留
                return this.shopdata.filter(item=>{
                    return item.ShopName.includes(this.keyword)

                })
            }
        }
    },

    methods: {
        // 回车清空输入内容
        Enter(){
            this.keyword = ""
        },
        clicktab(index) {
            if (index == this.activeIndex) {
                return;
            }
            this.activeIndex = index;

            this.tab=index
        },
        EnterProduct(){
            // 判断是否登录,未登录会跳转到登录页面
            if(this.isLogin=='true'){

                this.$router.push({name:"Menu"})
            }else{
                this.$router.push({name:"Login"})
            }
        },
        
        // 地图
        getPoint(e, BMap) {    //点击地图获取一些信息，
            this.show = true;
            this.postionMap.lng = e.point.lng;     //通过  e.point.lng获取经度
            this.postionMap.lat = e.point.lat;     //通过  e.point.lat获取纬度
            this.add.jd = e.point.lng;
            this.add.wd = e.point.lat;
            this.zoom = e.target.getZoom()

            let geocoder = new BMap.Geocoder();  //创建地址解析器的实例
            geocoder.getLocation(e.point, rs => {
                this.add.site = rs.address;

            });
        },
        infoWindowClose() {
            this.show = false
        },
        infoWindowOpen() {
            //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
            //并且信息窗口点击一次显示，一次消失
            //于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
            setInterval(() => {
                this.show = true
            }, 100)
        },
        fanhui() {
            this.$router.go(-1)
        }
    }
       
       
    
};
</script>

<style lang="less" scoped>
.eat {
    width: 100%;
    // height: 796px;
    background-color: #f5f5f5;
    padding-bottom: 50px;
    .map {
        width: 100%;
        height: 280px;
        background-color: skyblue;
    }
    .shop {
        width: 350px;
        background-color: #f5f5f5;
        margin: 0 auto;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding-top: 15px;
        .often{
            width: 350px;
            height: 370px;
            margin-top: 10px;
            padding-bottom: 50px;
            .shop-item {
                width: 100%;
                height: 130px;
                border-radius: 10px;
                display: flex;
                margin-bottom: 10px;
                .content {
                    padding: 16px 16px 160px;
                }
                .item-left {
                    width: 70%;
                    height: 100%;
                    background-color: #fff;
                    .shopname {
                        text-align: left;
                        width: 203px;
                        height: 30px;
                        text-align: left;
                        line-height: 30px;
                        font-size: 16px;
                        color: #000;
                        font-weight: 700;
                        margin-left: 10px;
                    }
                    .shopstatus {
                        width: 90px;
                        height: 0.8rem;
                        background-color: #e4393c;
                        color: #fff;
                        text-align: center;
                        line-height: 30px;
                        font-size: 14px;
                        margin: 5px 0 0 10px;
                    }
                    .shoptime {
                        color: #969696;
                        font-size: 14px;
                        margin: 5px 0px 5px 14px;
                    }
                    .shopaddress {
                        width: 182px;
                        color: #969696;
                        font-size: 14px;
                        margin-left: 14px;
                    }
                }
                .item-rig {
                    width: 30%;
                    height: 130px;
                    background-color: #fff;
                    .line {
                        width: 100%;
                        height: 100px;
                        margin-top: 5px;
                        border-left: 1px solid #d8d1d1;

                        .icons {
                            width: 100%;
                            height: 74px;
                            display: flex;
                            #iconone,
                            #icontwo {
                                font-size: 20px;
                                line-height: 70px;
                                color: #e4393c;
                            }
                            #iconone {
                                margin: 0px 15px 0px 28px;
                            }
                        }
                        .go {
                            height: 20px;
                            width: 100%;
                            font-size: 13px;
                            margin-top: 15px;
                            text-align: center;
                        }
                        .dist {
                            margin: 5px 0 0 28px;
                            color: #9a9696;
                            span {
                                color: #6572c8;
                                font-weight: 550;
                            }
                        }
                    }
                }
            }
        }
        .showShop {
            width: 350px;
            // height: 970px;
            margin-top: 10px;
            padding-bottom: 50px;
            .shop-item {
                width: 100%;
                height: 130px;
                border-radius: 10px;
                display: flex;
                margin-bottom: 10px;
                .item-left {
                    width: 70%;
                    height: 100%;
                    background-color: #fff;
                    .shopname {
                        text-align: left;
                        width: 203px;
                        height: 30px;
                        text-align: left;
                        line-height: 30px;
                        font-size: 16px;
                        color: #000;
                        font-weight: 700;
                        margin-left: 10px;
                    }
                    .shopstatus {
                        width: 90px;
                        height: 0.8rem;
                        background-color: #e4393c;
                        color: #fff;
                        text-align: center;
                        line-height: 30px;
                        font-size: 14px;
                        margin: 5px 0 0 10px;
                    }
                    .shoptime {
                        color: #969696;
                        font-size: 14px;
                        margin: 5px 0px 5px 14px;
                    }
                    .shopaddress {
                        width: 182px;
                        color: #969696;
                        font-size: 14px;
                        margin-left: 14px;
                    }
                }
                .item-rig {
                    width: 30%;
                    height: 130px;
                    background-color: #fff;
                    .line {
                        width: 100%;
                        height: 100px;
                        margin-top: 5px;
                        border-left: 1px solid #d8d1d1;

                        .icons {
                            width: 100%;
                            height: 74px;
                            display: flex;
                            #iconone,
                            #icontwo {
                                font-size: 20px;
                                line-height: 70px;
                                color: #e4393c;
                            }
                            #iconone {
                                margin: 0px 15px 0px 28px;
                            }
                        }
                        .go {
                            height: 20px;
                            width: 100%;
                            font-size: 13px;
                            margin-top: 15px;
                            text-align: center;
                        }
                        .dist {
                            margin: 5px 0 0 28px;
                            color: #9a9696;
                            span {
                                color: #6572c8;
                                font-weight: 550;
                            }
                        }
                    }
                }
            }
        }
        .chooseShop {
            width: 350px;
            height: 60px;
            background-color: #f5f5f5;
            margin-top: 20px;
            display: flex;
            .nearbyshop {
                font-size: 20px;
                color: #969696;
                text-align: center;
                line-height: 60px;
                font-weight: 500;
                margin-right: 20px;
            }

            .iconflag {
                font-size: 35px;
                margin: 13px 0 0 100px;
                color: #e4393c;
            }
            .active {
                color: #000;
                border-bottom: 2px solid #e4393c;
                font-weight: bold;
            }
        }
        .search {
            width: 300px;
            height: 40px;
            // background-color: red;
            margin: 0 auto;
            border-radius: 20px;
            position: relative;
            margin-right: 43px;
       
           
            input {
                width: 20px;
                height: 40px;
                border-radius: 20px;
                outline: none;
                border: none;
                padding-left: 40px;
                padding-top: 3px;
                transition: all .5s;
                border: 1px solid #686969;
                &:hover{
                width: 300px;
                
            }
            }
            .icon {
                position: absolute;
                top: 8px;
                left: 8px;
                font-size: 30px;
                display: inline-block;
            }
        }
    }
}
</style>
